<template>
    <!-- 未读报表 -->
    <div class="df fd-c w100 h100 box">
        <div class="top">
            <centerHeader @time_filter_click="time_filter_click" :time_filter_flag="time_filter_flag"
                @allClick="allClick" :all_flag="all_flag" :headerText="headerText"></centerHeader>
        </div>
        <ul class="content-top df">
            <li v-for="(item, index) in tab_list" :key="index" class="df jc-c ai-c"
                :class="tab_active == index ? 'tab-active' : ''" @click="tabClick(index)"><span>{{ item.name }}</span>
            </li>
        </ul>
        <div class="content df">
            <div class="l">
                <chart1></chart1>
                <chart3></chart3>
            </div>
            <div class="r">
                <chart2></chart2>
                <chart4></chart4>
            </div>
        </div>

    </div>

</template>

<script>
import centerHeader from './centerHeader.vue'
import chart1 from './unreadTableCharts/chart1.vue'
import chart2 from './unreadTableCharts/chart2.vue'
import chart3 from './unreadTableCharts/chart3.vue'
import chart4 from './unreadTableCharts/chart4.vue'
export default {
    name: '',
    components: { chart1, chart2, chart3, chart4, centerHeader },
    data() {
        return {
            tab_list: [{
                name: "未读报表",
                icon: ""
            }, {
                name: "xxxA表",
                icon: ""
            }, {
                name: "xxxB表",
                icon: ""
            }, {
                name: "xxxC表",
                icon: ""
            }],
            tab_active: 1,//tab切换  动态class
            time_filter_flag: 0,//时间筛选切换
            all_flag: 0,
            headerText: "未读报表",
        }
    },
    created() { },
    mounted() { },
    methods: {
        tabClick(i) {
            this.tab_active = i
        },
        time_filter_click(index) {//时间筛选点击事件
            console.log(index)
            this.time_filter_flag = index
        },
        allClick(index) {
            this.all_flag = index
        }
    }
}
</script>
<style scoped lang='scss'>
.top {
    height: 150px;

    h4 {
        font-weight: 600;
    }
}

.content {
    background-color: #fff;
    height: 100%;
    height: calc(100% - 60px);
    width: 100%;
    overflow: scroll;

    .l {
        width: 65%;
    }

    .r {
        width: 35%;
    }
}

.content-top {
    width: 100%;
    height: 50px;
    border-bottom: 1px solid #d6d6d6;
    background-color: #fff;
    margin-bottom: 0;

    li {
        padding: 5px 15px;
    }

    .tab-active {
        color: #39f;
    }
}

.box {
    width: 100%;
    height: calc(100% - 120px);
    overflow: hidden;
}
</style>
